<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_shop.searchCoupon }}</view>
				<view></view>
			</view>
			
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<!-- 列表 -->
		<view :style="{ padding: '30rpx 40rpx', opacity: dataInfo.useStatus ? 0.618 : 1 }" @click="changeWirteAction">
			<coupon-card :item="({ ...dataInfo, couponType: 4, canBuy: false })"></coupon-card>
		</view>
		
		<!-- 留空 -->
		<view style="height: 200rpx"></view>
		
		<u-modal :value="visible" :show-title="false" :content="lang_shop.wirteTips"
			show-cancel-button :cancel-text="lang_common.cancel" :confirm-text="lang_common.done"
			:confirm-color="'#FD1E43'" @confirm="wirteAction" z-index="9999999" @cancel="visible = false">
		</u-modal>
	</view>
</template>

<script>
	import {
		couponUseCoupon
	} from '@/api/merchant/coupon.js'
	export default {
		data() {
			return {
				visible: false,
				dataInfo: {}
			}
		},
		// 获取类型
		onLoad({ type }) {
			let event = this.getOpenerEventChannel()
			event.on('shop-coupon-search', result => {
				this.dataInfo = result
			})
		},
		methods: {
			// 点击触发优惠券回调
			changeWirteAction() {
				if (!this.dataInfo.useStatus) {
					this.visible = true
				}
			},
			// 核销优惠券
			wirteAction() {
				couponUseCoupon({
					couponSn: this.dataInfo.sn
				}).then(() => {
					this.dataInfo.useStatus = 1
					this.visible = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
